<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>微信群管理平台</title>
		<!-- 重置样式 -->
		<link rel="stylesheet" href="../css/reset.css">
		<!-- icon -->
		<link rel="stylesheet" href="../css/fonts.css">
		<link rel="stylesheet" href="../css/animate.css">
		<link rel="stylesheet" href="../js/layui/css/layui.css">
		<link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/main.css">
	</head>

	<body>
		<div class="animated slideInRight cus-manager-model">
			<div class="add-btn-wrapper">
				<button class="layui-btn danger-bg" data-toggle="modal" data-target="#addUserModal">新增客户</button>
				<div class="layui-btn normal-bg import-cus-wrapper">导入客户<input class="import-cus-input" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"></div>
				<a class="download-template-btn">下载模板</a>
			</div>
			<div class="table-wrapper">
				<table class="layui-table" id="user-table">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>车牌号</th>
							<th>车架号</th>
							<th>车型</th>
							<th>手机号</th>
							<th>组名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td class="cusname">马晓杰</td>
							<td class="sex">男</td>
							<td class="LSN">湘A54U89</td>
							<td class="VIN">VIN123456789</td>
							<td class="carType">奕歌</td>
							<td class="phone">18975188219</td>
							<td class="groupname">一组</td>
							<td>
								<span class="edit">修改</span>
								<span class="delete">删除</span>
							</td>
						</tr>
						<tr>
							<td>2</td>
							<td class="cusname">李春梅</td>
							<td class="sex">女</td>
							<td class="LSN">湘A9LM81</td>
							<td class="VIN">VIN123456789</td>
							<td class="carType">奕歌</td>
							<td class="phone">18975188219</td>
							<td class="groupname">二组</td>
							<td>
								<span class="edit">修改</span>
								<span class="delete">删除</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="paging"></div>
		</div>
		<!-- 新增用户Modal -->
		<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<form class="layui-form">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="addUserModalLabel">新增</h4>
						</div>
						<div class="modal-body">
							<div class="layui-form-item">
								<label class="layui-form-label">所属分组</label>
								<div class="layui-input-block">
									<select id="selectGroup" name="group" lay-filter="selectGroup" lay-verify="required">
										<option value="一组" data-id="1">一组</option>
										<option value="二组" data-id="2">二组</option>
										<option value="三组" data-id="3">三组</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">客户姓名</label>
								<div class="layui-input-block">
									<input type="text" name="cusName" required lay-verify="required" placeholder="请输入客户姓名" autocomplete="off"
									 class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">性别</label>
								<div class="layui-input-block">
									<input type="radio" lay-filter="sexSelect" name="sex" value="男" title="男" checked>
									<input type="radio" lay-filter="sexSelect" name="sex" value="女" title="女">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">车牌号</label>
								<div class="layui-input-block">
									<input type="text" name="cusLsn" required lay-verify="required" placeholder="请输入客户车牌号" autocomplete="off"
									 class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">车架号</label>
								<div class="layui-input-block">
									<input type="text" name="cusVin" placeholder="请输入客户车架号" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">车型</label>
								<div class="layui-input-block">
									<select name="carType" lay-verify="required">
										<option value="奕歌">奕歌</option>
										<option value="欧蓝德">欧蓝德</option>
										<option value="帕杰罗">帕杰罗</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">手机号</label>
								<div class="layui-input-block">
									<input type="text" name="cusPhone" placeholder="请输入客户手机号" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn danger-bg" lay-submit lay-filter="addCusSubmit">保存</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- 修改用户Modal -->
		<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<form class="layui-form">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="editUserModalLabel">修改</h4>
						</div>
						<div class="modal-body">
							<div class="layui-form-item">
								<label class="layui-form-label">所属分组</label>
								<div class="layui-input-block">
									<select id="editGroup" lay-filter="editGroup" name="editGroup" lay-verify="required">
										<option value="一组" data-id="1">一组</option>
										<option value="二组" data-id="2">二组</option>
										<option value="三组" data-id="3">三组</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">客户姓名</label>
								<div class="layui-input-block">
									<input id="editCusname" type="text" name="editCusName" required lay-verify="required" placeholder="请输入客户姓名"
									 autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">性别</label>
								<div class="layui-input-block">
									<input type="radio" lay-filter="editSexSelect" name="editSex" value="男" title="男">
									<input type="radio" lay-filter="editSexSelect" name="editSex" value="女" title="女">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">车牌号</label>
								<div class="layui-input-block">
									<input id="editLSN" type="text" name="editCusLsn" placeholder="请输入客户车牌号" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">车架号</label>
								<div class="layui-input-block">
									<input id="editVIN" type="text" name="editCusVin" placeholder="请输入客户车架号" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">车型</label>
								<div class="layui-input-block">
									<select name="editCarType" lay-verify="required">
										<option value="奕歌">奕歌</option>
										<option value="欧蓝德">欧蓝德</option>
										<option value="帕杰罗">帕杰罗</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">手机号</label>
								<div class="layui-input-block">
									<input id="editPhone" type="text" name="editCusPhone" required lay-verify="required" placeholder="请输入客户手机号"
									 autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn danger-bg" lay-submit lay-filter="editCusSubmit">修改</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- 公共导航栏 -->
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/bootstrap/js/bootstrap.min.js"></script>
		<script>
			// 实例化表单
			layui.use('form', function() {
				var form = layui.form;
				//新增用户 提交
				var defaultGroupId = $("#selectGroup option:selected").attr('data-id'); //默认的分组Id
				form.on('select(selectGroup)', function(data) {
					let index = data.elem.selectedIndex;
					defaultGroupId = data.elem[index].dataset.id; //得到选择的群组Id
				});
				form.on('submit(addCusSubmit)', function(data) {
					let group = data.field.group; //群组名称
					let cusName = data.field.cusName; //客户姓名
					let cusLsn = data.field.cusLsn; //客户车牌号
					let cusVin = data.field.cusVin; //客户车架号
					let cusPhone = data.field.cusPhone; //客户手机号
					let cusSex = data.field.sex; //客户性别
					let cusCarType = data.field.carType; //客户车型
					// $.ajax({
					// 	type: "POST",
					// 	url: "",
					// 	data: "",
					// 	//请求成功
					// 	success: function(data) {
					// 		console.log(data);
					// 	},
					// 	//请求失败，包含具体的错误信息
					// 	error: function(e) {
					// 		console.log(e.status);
					// 		console.log(e.responseText);
					// 	}
					// });
					return false;
				});

				//修改用户 提交
				var defaultEditGroupId = $("#editGroup option:selected").attr('data-id'); //默认的分组Id
				form.on('select(editGroup)', function(data) {
					let index = data.elem.selectedIndex;
					defaultEditGroupId = data.elem[index].dataset.id; //得到选择的群组Id
				});
				$(".edit").click(function() {
					let cusName = $(this).parent().siblings(".cusname").text();
					$("#editCusname").val(cusName);
					let groupname = $(this).parent().siblings(".groupname").text();
					$("#editGroup").find("option[value=" + groupname + "]").prop("selected", true);
					let LSN = $(this).parent().siblings(".LSN").text();
					$("#editLSN").val(LSN);
					let VIN = $(this).parent().siblings(".VIN").text();
					$("#editVIN").val(VIN);
					let phone = $(this).parent().siblings(".phone").text();
					$("#editPhone").val(phone);
					let sex = $(this).parent().siblings(".sex").text();
					$("input[name=editSex]").each(function() {
						if ($(this).attr('title') == sex) {
							$(this).attr('checked', true);
						}
					});
					let carType = $(this).parent().siblings(".carType").text();
					$("#editCarType").find("option[value=" + carType + "]").prop("selected", true);
					form.render('select');
					form.render('radio');
				});
				form.on('submit(editCusSubmit)', function(data) {
					let editGroup = data.field.editGroup; //群组
					let editCusName = data.field.editCusName; //客户姓名
					let editCusLsn = data.field.editCusLsn; //客户车牌号
					let editCusVin = data.field.editCusVin; //客户车架号
					let editCusPhone = data.field.editCusPhone; //客户手机号
					let editSex = data.field.editSex; //客户性别
					let editCarType = data.field.editCarType; //客户车型
					console.log(data.field);
					// $.ajax({
					// 	type: "POST",
					// 	url: "",
					// 	data: "",
					// 	//请求成功
					// 	success: function(data) {
					// 		console.log(data);
					// 	},
					// 	//请求失败，包含具体的错误信息
					// 	error: function(e) {
					// 		console.log(e.status);
					// 		console.log(e.responseText);
					// 	}
					// });
					return false;
				});
			});

			// 实例化分页
			layui.use('laypage', function() {
				var laypage = layui.laypage;

				//执行一个laypage实例
				laypage.render({
					elem: 'paging',
					limit: 5,
					theme: '#E51C23',
					count: 20, //数据总数，从服务端得到
					jump: function(obj, first) {
						//obj包含了当前分页的所有参数，比如：
						console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
						console.log(obj.limit); //得到每页显示的条数

						//首次不执行
						if (!first) {
							//do something
						}
					}
				});
			});

			// 修改用户信息
			$(".edit").click(function() {
				let account = $(this).parent().siblings(".account").text();
				let username = $(this).parent().siblings(".username").text();
				let role = $(this).parent().siblings(".role").text();
				let availableState = $(this).parent().siblings(".availableState").text();
				$("#editAccountInput").val(account);
				$("#editUsernameInput").val(username);
				$("#editUserModal").modal('show');
			});

			// 删除用户
			$("#user-table .delete").click(function() {
				// console.log($(this).parent().siblings(".serial").text());
				layer.confirm('确认删除该客户吗？', {
					btn: ['关闭', '确认'], //按钮
					closeBtn: 0
				}, function(index) {
					layer.close(index);
				}, function() {
					layer.msg('删除成功！');
				});
			});

			// 导入客户excel
			$(".import-cus-input").bind('change', function(e) {
				let file = e.target.files[0];
				var formdata = new FormData();
				formdata.append('fileType', 'excel'); //文件格式
				formdata.append('fileType_file', file);
				formdata.append('method', 'upload');
				console.log('fileType_file', file);
			});
		</script>
	</body>

</html>
